DomainView = function(width,height,canvas,dotRadius){
	this.model;
	
	this.pointerOffSetX=0;
	this.pointerOffSetY=0;
	
	this.connectionsDisplay = document.getElementById("connections");
	this.can = canvas;
	this.ctx =  this.can.getContext('2d')	
	
	this.width 	= width;
	this.height = height;
	this.dotRadius;
	this.ratioX,
	this.ratioY;
	

				this.blinkSwitch = true;
				this.blinkTurns = 0;
				this.blinkIntensity = 0;
	
	this.updateShownConnections = function(nr){
	this.connectionsDisplay.value = nr;
	}
	
	this.setModel = function(model){
	var ratios = model.getDimensions();
	this.setRatio(this.width/ratios[0],this.height/ratios[1]);
	this.model = model;
	}
	
	this.moveDot = function(i,x,y){
	this.model.moveDot(i,(x-this.pointerOffSetX)/this.ratioX,(y-this.pointerOffSetY)/this.ratioY);
	this.initateBlink();
	}
	
	this.initateBlink = function(){
	this.blinkTurns = 5;
	this.blinkIntensity = 0;
	this.blinkSwitch = false;
	}
	
	this.setRatio = function(x,y){
	this.ratioX = x;
	this.ratioY = y;
	}
		
	this.setDotRadius = function(rad){
	this.dotRadius = rad;
	this.pointerOffSetX = 2*rad;
	this.pointerOffSetY = 2*rad;			
	}
	this.adjustCanvas = function(){
	this.can.width = this.width+this.dotRadius*2;
	this.can.height = this.height+this.dotRadius*2;
	}
	this.update = function(tpf,sWidth,sHeight,entities){	
	var nodeCount = entities.length;

	this.ctx.fillStyle = 'rgb(0,0,0)';
	this.ctx.fillRect(0,0,this.can.width,this.can.height);	
		
	//document.getElementById("info").innerHTML = "<br>Fps:"+(1/tpf)+"<br>Tpf:"+tpf+"s";

	
		this.ctx.strokeStyle = 'rgb(255,255,255)';
		this.ctx.lineWidth = 2;
		for(var i=0;i<nodeCount;i++){
			for(var j = 0;j< entities[i].connectComponent.connectedEntities.length; j++){
				if(entities[i].connectComponent.connectedEntities[j]!=null)
				{
				this.ctx.beginPath();
				this.ctx.moveTo(entities[i].spatialComponent.getX()*this.ratioX+this.dotRadius,entities[i].spatialComponent.getY()*this.ratioY+this.dotRadius);
				this.ctx.lineTo(entities[entities[i].connectComponent.connectedEntities[j]].spatialComponent.getX()*this.ratioX+this.dotRadius,entities[entities[i].connectComponent.connectedEntities[j]].spatialComponent.getY()*this.ratioY+this.dotRadius);
				this.ctx.stroke();			
				this.ctx.closePath();
				}
			}		
		}

			this.ctx.strokeStyle = 'rgba(255,0,0,0.9)';
			
			for(var i=0;i<nodeCount;i++){
			var spatial = entities[i].spatialComponent;
			this.ctx.beginPath();
			this.ctx.arc(spatial.getX()*this.ratioX+this.dotRadius,spatial.getY()*this.ratioY+this.dotRadius,this.dotRadius, 0, Math.PI*2, true);
			this.ctx.fill();		
			this.ctx.closePath();
			
			this.ctx.lineWidth = 1.5;
			this.ctx.beginPath();
			this.ctx.arc(spatial.getX()*this.ratioX+this.dotRadius, spatial.getY()*this.ratioY+this.dotRadius,this.dotRadius, 0, Math.PI*2, true);
			this.ctx.stroke();
			this.ctx.closePath();			
			}
			
			// FOR TESTING
			if(this.blinkTurns>0){
				if(this.blinkIntensity>.8){
				this.blinkIntensity = .8;
				this.blinkSwith=false;
				this.blinkTurns--;
				}
				else if(this.blinkIntensity<0.3){
				this.blinkIntensity = 0.3;
				this.blinkSwith=true;
				}
				if(this.blinkSwith){
				this.blinkIntensity+=tpf*5;
				}
				else{
				this.blinkIntensity-=tpf*5;
				}
			}
			
			this.ctx.strokeStyle = 'rgba(255,0,0,'+this.blinkIntensity+')';
			this.ctx.lineWidth = 1.5;

			this.ctx.beginPath();
			this.ctx.arc(entities[0].arriveComponent.target.spatialComponent.position.e(1)*this.ratioX+this.dotRadius,entities[0].arriveComponent.target.spatialComponent.position.e(2)*this.ratioY+this.dotRadius,10, 0, Math.PI*2, true);
			this.ctx.stroke();
			this.ctx.closePath();

			this.ctx.fillStyle = 'rgba(100,255,100,1)';
			
			this.ctx.lineWidth = 1.0;
			
			this.ctx.strokeStyle = 'rgba(100,100,255,1)';
				this.ctx.beginPath();
				this.ctx.moveTo(entities[1].spatialComponent.getX()*this.ratioX+this.dotRadius,entities[1].spatialComponent.getY()*this.ratioY+this.dotRadius);
				this.ctx.lineTo((entities[1].pursueComponent.targetPosition.elements[0])*this.ratioX+this.dotRadius,(entities[1].pursueComponent.targetPosition.elements[1])*this.ratioY+this.dotRadius);
				this.ctx.stroke();
				this.ctx.closePath();
			this.ctx.strokeStyle = 'rgba(255,100,100,1)';
				this.ctx.beginPath();
				this.ctx.moveTo(entities[1].spatialComponent.getX()*this.ratioX+this.dotRadius,entities[1].spatialComponent.getY()*this.ratioY+this.dotRadius);
				this.ctx.lineTo((entities[1].spatialComponent.getX()+entities[1].pursueComponent.steering_direction.elements[0])*this.ratioX+this.dotRadius,(entities[1].spatialComponent.getY()+entities[1].pursueComponent.steering_direction.elements[1])*this.ratioY+this.dotRadius);
				this.ctx.stroke();
				this.ctx.closePath();
				
			this.ctx.lineWidth = 2.0;
				
			this.ctx.strokeStyle = 'rgba(100,255,100,1)';
				this.ctx.beginPath();
				this.ctx.moveTo(entities[1].spatialComponent.getX()*this.ratioX+this.dotRadius,entities[1].spatialComponent.getY()*this.ratioY+this.dotRadius);
				this.ctx.lineTo((entities[1].spatialComponent.getX()+entities[1].vehicleComponent.velocity.elements[0])*this.ratioX+this.dotRadius,(entities[1].spatialComponent.getY()+entities[1].vehicleComponent.velocity.elements[1])*this.ratioY+this.dotRadius);
				this.ctx.stroke();
				this.ctx.closePath();					

			this.ctx.lineWidth = 0.5;


				this.ctx.beginPath();
				this.ctx.arc((entities[2].spatialComponent.getX()+entities[2].wanderComponent.totalOffset.e(1))*this.ratioX+this.dotRadius,(entities[2].spatialComponent.getY()+entities[2].wanderComponent.totalOffset.e(2))*this.ratioY+this.dotRadius, 2, 0, Math.PI*2, true);
				this.ctx.fill();
				this.ctx.closePath();

				this.ctx.beginPath();
				this.ctx.arc((entities[2].spatialComponent.getX()+entities[2].wanderComponent.frontOfEntityOffset.e(1))*this.ratioX+this.dotRadius,(entities[2].spatialComponent.getY()+entities[2].wanderComponent.frontOfEntityOffset.e(2))*this.ratioY+this.dotRadius, entities[2].wanderComponent.radius, 0, Math.PI*2, true);
				this.ctx.stroke();
				this.ctx.closePath();

			// END TESTING
	this.ctx.closePath();
	}
}